<template>
  <view style="background-color: #f6f7fb; height: 100vh; padding-top: 1px">
    <div class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
      <div class="back center" @click="back">
        <image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
      </div>
      {{$t('车辆库')}}
    </div>
    <view
      class="fix-topx"
      :style="`top: calc(${statusBarHeight}px + 116rpx);`"
      v-if="find_user.identity_type != 8"
    >
      <view class="car_tab">
        <view
          class="item"
          :class="carIndex == 0 ? 'hover' : ''"
          @click="clickCarTab(0)"
        >
          {{$t('自有车辆')}}
        </view>
        <view
          v-if="false"
          class="item"
          :class="carIndex == 1 ? 'hover' : ''"
          @click="clickCarTab(1)"
        >
          {{$t('三方车辆')}}
        </view>
      </view>

      <view class="car_tab">
        <view
          class="item"
          :class="barIndex == 0 ? 'hover' : ''"
          @click="clickCarTabar(0)"
        >
          {{$t('全部')}}
        </view>
        <view
          class="item"
          :class="barIndex == 2 ? 'hover' : ''"
          @click="clickCarTabar(2)"
        >
          {{$t('汽运')}}
        </view>
        <view
          class="item"
          :class="barIndex == 5 ? 'hover' : ''"
          @click="clickCarTabar(5)"
        >
          {{$t('铁路')}}
        </view>
        <view
          class="item"
          :class="barIndex == 4 ? 'hover' : ''"
          @click="clickCarTabar(4)"
        >
          {{$t('海运')}}
        </view>
        <view
          class="item"
          :class="barIndex == 3 ? 'hover' : ''"
          @click="clickCarTabar(3)"
        >
          {{$t('空运')}}
        </view>
      </view>

      <view class="car_search">
        <view class="item" @click="openPickerSearchState">
          <view class="name">
            {{ searchState || $t('当前状态') }}
          </view>
          <uv-icon name="arrow-down" color="#333" size="20rpx"></uv-icon>
        </view>
        <view class="item" @click="openPickerEmplType">
          <view class="name">
            {{ emplType || $t('车型类别') }}
          </view>
          <uv-icon name="arrow-down" color="#333" size="20rpx"></uv-icon>
        </view>
      </view>

      <view
        v-if="false"
        class="car_tab mt-15 between"
        style="
          display: flex;
          background: none;
          padding: 0;
          padding-bottom: 16rpx;
          box-sizing: content-box;
        "
      >
        <view
          @click="cheyuan"
          style="
            width: 48%;
            text-align: center;
            height: 96rpx;
            line-height: 30px;
          "
          :class="barIndex == 0 ? 'hover' : ''"
          class="between rounded-26 bg-white"
        >
          <view class="flex-start ml-25">
            <image
              src="../../static/icon/bindingIcon.png"
              mode=""
              class="w-25 h-25 mt-15"
            ></image>
            <p class="ml-15 fz28 text-010 font-bold">{{$t('去绑定')}}</p>
          </view>
          <image
            src="../../static/icon/arrow.png"
            mode=""
            class="w-10 h-20 mr-25"
          ></image>
        </view>
        <view
          @click="xiaoxi"
          style="
            width: 48%;
            text-align: center;
            height: 96rpx;
            line-height: 30px;
          "
          :class="barIndex == 1 ? 'hover' : ''"
          class="between rounded-26 bg-white"
        >
          <view class="flex-start ml-25">
            <image
              src="../../static/icon/message.png"
              mode=""
              class="w-25 h-25 mt-15"
            ></image>
            <p class="ml-15 fz28 text-010 font-bold">{{$t('我的消息')}}</p>
          </view>
          <image
            src="../../static/icon/arrow.png"
            mode=""
            class="w-10 h-20 mr-25"
          ></image>
        </view>
      </view>
    </view>

    <view :style="[getHeight()]">
      <mescroll-uni
        :fixed="false"
        ref="mescrollRef"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
        :toTop="false"
      >
        <view class="driver_list" v-for="item in driverList" :key="item.id">
          <view class="driver_item">
            <view
              class="driver_state"
              :class="
                item.status == 1
                  ? 'blue_bg'
                  : item.status == 2
                  ? 'green_bg'
                  : item.status == 3
                  ? 'org_bg'
                  : item.status == 4
                  ? 'red_bg'
                  : ''
              "
            >
              <view v-if="item.status == 1">{{$t('空闲中')}}</view>
              <view v-if="item.status == 2">{{$t('待出发')}}</view>
              <view v-if="item.status == 3">{{$t('工作中')}}</view>
              <view v-if="item.status == 4">{{$t('停运')}}</view>
              <image
                class="ico_bg"
                src="/static/img/bg_3.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="driver_item_bor">
              <view class="driver_title">
                <image
                  class="ico"
                  src="/static/img/ico_c4.png"
                  v-if="item.mode == 2"
                  mode="aspectFill"
                >
                </image>
                <image
                  class="ico"
                  src="/static/img/ico_c1.png"
                  v-if="item.mode == 3"
                  mode="aspectFill"
                >
                </image>
                <image
                  class="ico"
                  src="/static/img/ico_c3.png"
                  v-if="item.mode == 4"
                  mode="aspectFill"
                >
                </image>
                <image
                  class="ico"
                  src="/static/img/ico_c2.png"
                  v-if="item.mode == 5"
                  mode="aspectFill"
                >
                </image>
                <view class="tag_yellow">
                  <view class="tag_bor">
                    {{ item.car_number }}
                  </view>
                </view>
                <view class="name" v-if="item.driver">
                  {{ item.driver.title }}
                </view>
              </view>

              <view class="driver_site">
                <u-icon name="map-fill" color="#D8D8D8" size="26rpx"></u-icon>
                <view class="name">
                  {{
                    item.current_city ? item.current_city.mergename : $t('暂无信息')
                  }}
                </view>
                <view
                  class="tag"
                  v-if="
                    item.status == 3 &&
                    item.step &&
                    item.step.area &&
                    item.step.area.mergename
                  "
                >
                  {{$t('最近打卡点')}}：{{ item.step ? item.step.area.mergename : "" }}
                  {{ item.step ? item.step.create_at : "" }}
                </view>
              </view>

              <view class="driver_info">
                <view class="item">
                  <view class="name">
                    {{ item.category ? item.category.title : "" }}
                  </view>
                  <view class="text"> {{$t('车型')}} </view>
                </view>
                <view class="item">
                  <view class="name">
                    {{ item.car_l }}*{{ item.car_w }}*{{ item.car_h }}
                  </view>
                  <view class="text"> {{$t('尺寸')}}(m) </view>
                </view>
                <view class="item">
                  <view class="name">
                    {{ item.product_volume }}
                  </view>
                  <view class="text"> {{$t('容积')}}(m³) </view>
                </view>
                <view class="item">
                  <view class="name">
                    {{ item.product_weight }}
                  </view>
                  <view class="text"> {{$t('载重')}}(t) </view>
                </view>
              </view>

              <view
                :class="{
                  driver_current_blue: item.status == 1 || item.status == 2,
                  driver_current_yellow: item.status == 3,
                }"
              >
                <view class="title">
                  {{ item.status == 3 ? $t('当前') : $t('期望') }}
                </view>
                <swiper
                  class="w-full h-full"
                  :vertical="true"
                  :autoplay="true"
                  interval="2000"
                  :circular="true"
                >
                  <swiper-item v-if="item.luxian.length > 0">
                    <div
                      class="flex w-full h-full"
                      v-if="get(item, 'luxian.0.cfd.shortname')"
                    >
                      <view class="name center h-full">
                        {{
                          get(item, "luxian.0.cfd.shortname") ||
                          ""
                        }}
                      </view>
                      <image
                        class="ico_line"
                        src="/static/img/ico_line4.png"
                        mode="widthFix"
                      >
                      </image>
                      <view class="name center h-full">
                        {{
                          get(item, "luxian.0.mdd.shortname") || ""
                        }}
                      </view>
                    </div>
                    <div v-else class="flex w-full h-full px-20 fz24">
                      {{$t('当前无运输路线')}}
                    </div>
                  </swiper-item>
                  <swiper-item>
                    <div class="between w-full h-full">
                      <view
                        class="current_item center flex-1 text-gray-666 fz22"
                      >
                        {{$t('曝光量')}}：<text class="text-gray-3d3d3d font-bold">{{
                          item.exposure_number
                        }}</text>
                      </view>
                      <view
                        class="current_item center flex-1 text-gray-666 fz22"
                      >
                        {{$t('查看量')}}：<text class="text-gray-3d3d3d font-bold">{{
                          item.lookat_number
                        }}</text>
                      </view>
                      <view
                        class="current_item center flex-1 text-gray-666 fz22"
                      >
                        {{$t('咨询量')}}：<text class="text-gray-3d3d3d font-bold">{{
                          item.comment_number
                        }}</text>
                      </view>
                    </div>
                  </swiper-item>
                </swiper>
              </view>
              <!-- <view class="driver_current_blue" v-if="item.status==1||item.status==2">
									<view class="title">
										{{$t('当前')}}
									</view>
									<view class="current_item">
										{{$t('曝光量')}}：<text>{{item.exposure_number}}</text>
									</view>
									<view class="current_item">
										{{$t('查看量')}}：<text>{{item.lookat_number}}</text>
									</view>
									<view class="current_item">
										{{$t('咨询量')}}：<text>{{item.comment_number}}</text>
									</view>
								</view> -->
              <view class="driver_btn">
                <view class="btn_blue" @click="openCarManage(item)">
                  <image
                    class="ico"
                    src="/static/img/ico_1.png"
                    mode="aspectFill"
                  ></image>
                  <text>{{$t('车辆管理')}}</text>
                </view>
                <view class="btn_chat" @click="callUser(item)">
                  <image
                    class="ico"
                    src="/static/img/ico_2.png"
                    mode="aspectFill"
                  ></image>
                  <text>{{$t('联系')}}TA</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="height: 220rpx"></view>
      </mescroll-uni>
    </view>

    <view class="footer_none"></view>
    <view class="footer_btn" v-if="isCar == 1">
      <view class="btn" @click="addVehicle"> {{$t('添加载具')}} </view>
    </view>
    <!-- 车辆管理 -->
    <u-popup
      :show="popupCar"
      mode="bottom"
      round="20"
      :closeable="true"
      @close="popupCar = false"
    >
      <view class="driver_manage">
        <view class="title"> {{$t('车辆管理')}} </view>
        <view class="nav">
          <template v-if="isCar == 1">
            <view class="item" @click="gotoCarState" v-if="driverInfor.status != 3">
              <image
                class="ico"
                src="/static/img/ico_c5.png"
                mode="widthFix"
              ></image>
              <view class="name"> {{$t('更改车辆状态')}} </view>
            </view>
            <view class="item" @click="gotoCarCity">
              <image
                class="ico"
                src="/static/img/ico_c6.png"
                mode="widthFix"
              ></image>
              <view class="name"> {{$t('更改车辆位置')}} </view>
            </view>
            <view class="item" @click="gotoCarManage">
              <image
                class="ico"
                src="/static/img/ico_c7.png"
                mode="widthFix"
              ></image>
              <view class="name"> {{$t('更改车辆信息')}} </view>
            </view>
          </template>
          <template v-else>
            <view class="item" @click="gotoCarCity">
              <image
                class="ico"
                src="/static/img/ico_c6.png"
                mode="widthFix"
              ></image>
              <view class="name"> {{$t('更改车辆位置')}} </view>
            </view>
          </template>
        </view>
      </view>
    </u-popup>

    <uv-picker
      ref="pickerSearchState"
      :columns="columns"
      keyName="label"
      @confirm="confirmSearchState"
    ></uv-picker>

    <uv-picker
      ref="pickerEmplType"
      :columns="columnsEmplType"
      keyName="label"
      @confirm="confirmEmplType"
    ></uv-picker>

    <u-modal
      class="text-center"
      :show="showTel"
      :content="content"
      :showCancelButton="true"
      @cancel="cancelTel"
      @confirm="confirmTel"
    ></u-modal>
  </view>
</template>

<script>
import { transportList, car_brand_search } from "@/api/driver";
import { business_info } from "@/api/user.js";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import { request_minute } from "@/api/basic";
export default {
  mixins: [MescrollMixin], // 使用mixin
  data() {
    return {
      statusBarHeight: uni.getStorageSync("statusBarHeight") || 0,
      identityType: uni.getStorageSync("identity_type"),
      barIndex: "",
      carIndex: 0,
      btnIndex: "",
      showTel: false,
      content: "",
      mobile: "",
      searchState: "",
      emplType: "",
      columns: [
        [
          {
            label: this.$t('请选择'),
            id: "",
          },
          {
            label: this.$t('空闲'),
            id: 1,
          },
          {
            label: this.$t('待出发'),
            id: 2,
          },
          {
            label: this.$t('工作中'),
            id: 3,
          },
          {
            label: this.$t('停工'),
            id: 4,
          },
        ],
      ],
      columnsEmplType: [],
      columnsEmplTypeVal: [],

      popupCar: false,
      driverInfor: {},
      driverList: [],
      downOption: {
        textLoading: this.$t('加载中'),
        textSuccess: this.$t('加载成功'),
        textInOffset: this.$t('下拉刷新'),
        textOutOffset: this.$t('释放更新'),
      },
      upOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        noMoreSize: 4,
        auto: true,
        textNoMore: this.$t('没有更多数据'),
        empty: {
          // icon: "", // 图标路径
          tip: this.$t('暂无相关数据'),
        },
      },
      user_id: "",
      find_user: {},
      isCar: 0,
    };
  },
  onLoad(options) {
    this.isCar = options.isCar;
    window.onNativeShow = () => {
      this.driverList = [];
      this.mescroll?.resetUpScroll();
    };
    this.brand_search();
    this.user_id = uni.getStorageSync("user_id");
    if (this.user_id) {
      this.find_info();
    }
  },
  onShow() {
    this.driverList = [];
    this.mescroll?.resetUpScroll();
  },
  methods: {
    getHeight() {
      return {
        height: `calc(100vh - ${this.statusBarHeight}px - 100rpx - 490rpx)`,
      };
    },
    callUser(item) {
      if (uni.getStorageSync("user_id") == item.driver.bind_user_id) {
        uni.showToast({
          title: this.$t('不能给自己打电话'),
          icon: "none",
        });
      } else {
        request_minute({
          user_id: uni.getStorageSync("user_id"),
          target_id: item.driver.bind_user_id,
        }).then((res) => {
          if (res.data.data.flag == 1) {
            this.isMessageGo({
              action: "call",
              data: {
                userId: item.driver.bind_user_id,
                type: res.data.data.type || 1,
              },
            });
          } else {
            uni.$u.toast("积分不足，请充值积分");
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/vip/scorePoint",
              });
            }, 500);
          }
        });
      }
    },
    cancelTel() {
      this.showTel = false;
    },
    confirmTel() {
      uni.makePhoneCall({
        phoneNumber: this.mobile || "",
      });
      this.showTel = false;
    },
    cheyuan() {
      uni.navigateTo({
        url: "/pages/vehicleSourceInformation/index",
      });
    },
    xiaoxi() {
      uni.navigateTo({
        url: "/pages/driverTask/unbindInvitation",
      });
    },
    back() {
      // uni.navigateBack()
      this.cback();
    },
    find_info() {
      var that = this;
      business_info({
        user_id: this.user_id,
      }).then((res) => {
        that.find_user = res.data.data;
        uni.setStorageSync("identity_type", that.find_user.identity_type);
      });
    },
    brand_search() {
      var columnsEmplType = [];
      var that = this;
      car_brand_search({
        barIndex: that.barIndex,
      }).then((res) => {
        var arr = res.data.data.data;
        for (var i = 0; i < arr.length; i++) {
          columnsEmplType.push({
            id: arr[i]["val"],
            label: (arr[i]["text"] || '') + " " + arr[i]["title"],
          });
        }
        that.columnsEmplType = [columnsEmplType];
        this.columnsEmplType_id = '';
        this.emplType = '';
        this.getList();
      });
    },
    clickCarTabar(index) {
      this.barIndex = index;
      this.brand_search();
    },
    clickCarTab(index) {
      this.carIndex = index;
      if (this.carIndex == 0) {
        this.driverList = [];
        var page = {
          num: 1,
          size: 10,
          time: null,
        };
        transportList({
          page: page.num,
          size: page.size,
          user_id: uni.getStorageSync("user_id"),
          types: this.isCar == 1 ? 1 : 2,
        }).then((res) => {
          if (!res.data.data.data.list) res.data.data.data.list = [];
          this.mescroll.endBySize(
            res.data.data.data.list.length,
            res.data.data.data.count
          );
          if (page.num == 1) this.driverList = [];
          this.driverList = this.driverList.concat(res.data.data.data.list);
        });
      } else {
        this.driverList = [];
        var page = {
          num: 1,
          size: 10,
          time: null,
          third: "third",
        };
        transportList({
          page: page.num,
          size: page.size,
          third: page.third,
          user_id: uni.getStorageSync("user_id"),
          types: this.isCar == 1 ? 1 : 2,
        }).then((res) => {
          if (!res.data.data.data.list) res.data.data.data.list = [];
          this.mescroll.endBySize(
            res.data.data.data.list.length,
            res.data.data.data.count
          );
          if (page.num == 1) this.driverList = [];
          this.driverList = this.driverList.concat(res.data.data.data.list);
        });
      }
    },
    openCarManage(v_tem) {
      this.driverInfor = v_tem;
      this.popupCar = true;
    },
    downCallback() {
      this.driverList = [];
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      setTimeout(() => {
        transportList({
          third: this.carIndex == 0 ? "" : "third",
          types: this.isCar == 1 ? 1 : 2,
          page: page.num,
          size: page.size,
          user_id: uni.getStorageSync("user_id"),
        }).then((res) => {
          if (!res.data.data.data.list) res.data.data.data.list = [];
          this.mescroll.endBySize(
            res.data.data.data.list.length,
            res.data.data.data.count
          );
          if (page.num == 1) this.driverList = [];
          this.driverList = this.driverList.concat(res.data.data.data.list);
        });
      }, 500);
    },
    gotoCarManage() {
      uni.navigateTo({
        url:
          "/pages/driverTask/carManage?driverInfor=" +
          JSON.stringify(this.driverInfor),
      });
      this.popupCar = false;
    },
    gotoCarState() {
      uni.navigateTo({
        url:
          "/pages/driverTask/carState?driverInfor=" +
          JSON.stringify(this.driverInfor),
      });
      this.popupCar = false;
    },
    gotoCarCity() {
      uni.navigateTo({
        url:
          "/pages/driverTask/carCity?driverInfor=" +
          JSON.stringify(this.driverInfor),
      });
      this.popupCar = false;
    },
    addVehicle() {
      uni.navigateTo({
        url: "/pages/driverTask/addDriver",
      });
    },
    openPickerSearchState() {
      this.$refs.pickerSearchState.open();
    },
    confirmSearchState(e) {
      this.columnsEmplState_id = e.value[0].id;
      this.searchState = e.value[0].label;
      this.getList();
    },
    openPickerEmplType(index) {
      this.$refs.pickerEmplType.open();
    },
    confirmEmplType(e) {
      this.columnsEmplType_id = e.value[0].id;
      this.emplType = e.value[0].label;
      this.getList();
    },
    getList() {
      var that = this;
      this.driverList = [];
      var page = {
        num: 1,
        size: 10,
        time: null,
      };
      transportList({
        page: page.num,
        size: page.size,
        user_id: uni.getStorageSync("user_id"),
        status: that.columnsEmplState_id,
        type: that.columnsEmplType_id,
        mode: that.barIndex,
        types: this.isCar == 1 ? 1 : 2,
      }).then((res) => {
        if (!res.data.data.data.list) res.data.data.data.list = [];
        this.mescroll.endBySize(
          res.data.data.data.list.length,
          res.data.data.data.count
        );
        if (page.num == 1) this.driverList = [];
        this.driverList = this.driverList.concat(res.data.data.data.list);
      });
    },
  },
};
</script>

<style scoped lang="scss">
.text-gray-666 {
  color: #666;
}

.driver_manage {
  .title {
    font-size: 32rpx;
    font-weight: bold;
    padding: 30rpx 50rpx 0;
    line-height: 40rpx;
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding-bottom: 20rpx;

    .item {
      padding: 40rpx;
    }

    .ico {
      width: 138rpx;
      height: 138rpx;
    }

    .name {
      color: #8c8c8c;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }
}

.driver_list {
  padding: 0 24rpx;

  .driver_item {
    position: relative;
    margin-top: 20rpx;
    &:not(:first-of-type) {
      margin-top: 0;
    }

    .driver_state {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 9;
      height: 70rpx;
      line-height: 50rpx;
      color: #fff;
      font-size: 24rpx;
      border-radius: 0 20rpx 0 0;
      width: 188rpx;
      padding-left: 30rpx;
      text-align: center;

      &.org_bg {
        background: linear-gradient(45deg, #ffb601, #ff5401);
      }

      &.blue_bg {
        background: linear-gradient(45deg, #66d6e2, #278aff);
      }

      &.red_bg {
        background: linear-gradient(45deg, #ffa39b, #ff4231);
      }

      &.green_bg {
        background: linear-gradient(45deg, #4ce160, #1cbb2e);
      }

      &.gray_bg {
        background: linear-gradient(45deg, #ededed, #cccccc);
        color: #555;
      }

      .ico_bg {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        z-index: 10;
        width: 100%;
        height: auto;
      }
    }
  }

  .driver_btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70rpx;

    .ico {
      flex-shrink: 0;
      width: 24rpx;
      height: 24rpx;
    }

    .btn_blue {
      display: flex;
      align-items: center;

      text {
        color: #278aff;
        font-size: 24rpx;
        padding-left: 8rpx;
      }
    }

    .btn_chat {
      display: flex;
      align-items: center;

      text {
        color: #8c8c8c;
        font-size: 24rpx;
        padding-left: 8rpx;
      }
    }
  }

  .driver_current_yellow,
  .driver_current_blue {
    display: flex;
    align-items: center;
    height: 56rpx;
    border-radius: 10rpx;
    background: #fff7ea;
    margin-top: 10rpx;
    overflow: hidden;

    .ico_line {
      flex-shrink: 0;
      width: 30rpx;
      margin-left: 20rpx;
    }

    .name {
      flex-shrink: 0;
      font-size: 22rpx;
      line-height: 30rpx;
      margin-left: 20rpx;
      color: #333;
      font-weight: bold;
    }

    .title {
      flex-shrink: 0;
      color: #fff;
      background: linear-gradient(to right, #ff5d02, #ff9f02);
      height: 56rpx;
      font-size: 18rpx;
      width: 30rpx;
      text-align: center;
      line-height: 22rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .driver_current_blue {
    display: flex;
    align-items: center;
    height: 56rpx;
    border-radius: 10rpx;
    background: #eaf6ff;
    margin-top: 10rpx;
    overflow: hidden;

    .current_item {
      font-size: 22rpx;
      color: #666;
      line-height: 30rpx;
      width: 30%;

      text {
        color: #333;
        font-weight: bold;
      }
    }
    .title {
      background: linear-gradient(to right, #278aff, #66d6e2);
    }
  }
  .driver_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f7f7f7;
    border-radius: 10rpx;
    text-align: center;

    .item {
      padding: 20rpx 32rpx;

      .name {
        font-size: 26rpx;
        line-height: 30rpx;
        color: #333;
        font-weight: bold;
      }

      .text {
        font-size: 20rpx;
        line-height: 20rpx;
        color: #666;
        margin-top: 16rpx;
      }
    }
  }

  .driver_site {
    display: flex;
    align-items: center;
    padding: 16rpx 0;

    .name {
      font-size: 20rpx;
      line-height: 30rpx;
      color: #999;
      padding-left: 4rpx;
      flex-shrink: 0;
      margin-right: 10rpx;
    }

    .tag {
      background: #fff7ea;
      height: 28rpx;
      line-height: 28rpx;
      border-radius: 6rpx;
      padding: 0 10rpx;
      font-size: 16rpx;
      color: #ff5d02;
    }
  }

  .driver_title {
    display: flex;
    align-items: center;
    padding-top: 30rpx;

    .tag_yellow {
      flex-shrink: 0;
      background: #fcce00;
      padding: 4rpx;
      border-radius: 6rpx;
      margin: 0 10rpx;
    }

    .tag_blue {
      flex-shrink: 0;
      background: #278aff;
      padding: 4rpx;
      border-radius: 6rpx;
      margin: 0 10rpx;
      color: #fff;
    }

    .tag_bor {
      border: 1rpx solid #666;
      border-radius: 6rpx;
      font-size: 22rpx;
      line-height: 30rpx;
      padding: 0 10rpx;
    }

    .name {
      font-size: 30rpx;
      line-height: 32rpx;
      font-weight: bold;
    }

    .ico {
      flex-shrink: 0;
      width: 34rpx;
      height: 34rpx;
    }
  }

  .driver_item_bor {
    background: #fff;
    border-radius: 20rpx;
    padding: 0 24rpx;
  }
}

.footer_none {
  width: 100%;
  height: 0rpx;
  background-color: transparent;
}

.footer_btn {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  padding: 30rpx 30rpx 60rpx;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

  .btn {
    width: 100%;
    height: 90rpx;
    border-radius: 50rpx;
    background: linear-gradient(90deg, #278aff 0%, #66d6e2 100%);
    color: #fff;
    text-align: center;
    line-height: 90rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.car_search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 14rpx 24rpx 24rpx;
  border-radius: 0 0 20rpx 20rpx;
  box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.04);

  .item {
    height: 80rpx;
    background: #f7f7f7;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;

    .name {
      font-size: 24rpx;
      line-height: 40rpx;
    }

    &:first-child {
      width: 180rpx;
      flex-shrink: 0;
      margin-right: 20rpx;
    }

    &:last-child {
      width: 100%;
    }
  }
}

.car_tab {
  display: flex;
  align-items: center;
  height: 100rpx;
  padding: 0 10rpx;
  background: #fff;

  .item {
    font-size: 28rpx;
    line-height: 60rpx;
    padding: 0 30rpx;
    position: relative;

    &.hover {
      color: #278aff;

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 50rpx;
        height: 4rpx;
        border-radius: 4rpx;
        background: #278aff;
        margin-left: -25rpx;
      }
    }
  }
}

.header {
  font-size: 34rpx;
  height: 100rpx;
  font-weight: bold;
  text-align: center;
  position: relative;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  justify-content: center;
  margin-bottom: 16rpx;
}

.back {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  bottom: 18rpx;
  left: 20rpx;
}

.fix-topx {
  z-index: 100;
  margin-left: 24rpx;
  margin-right: 24rpx;
  border-radius: 26rpx;
  z-index: 99;
  background-color: #f6f7fb;
}
</style>
